<template>
	<view class="content">
		<view class="titles">
			<view>{{title}}</view>
			<view>总计：<text>￥{{total}}</text></view>
		</view>
		<view class="info" v-if="list.length>0">
			<view class="item" v-for="(item,i) in list" @click="detail(item)">
				<view>{{item.name}}</view>
				<view class="money">￥{{item.true_interest_money}}</view>
				<uni-icons type="right" size="20" color="#888888"></uni-icons>
			</view>
		</view>
		<image v-if="list.length<1" class="none" src="@/static/img/img_none.png" mode="widthFix"></image>


	</view>
</template>

<script>
	import {
		userInterest
	} from '@/common/js/index.js'
	export default {
		data() {
			return {
				page: 1,
				list: '',
				isAll: false,
				type: '',
				title: '',
				total: '',
				title2: '',
			}
		},
		onLoad(e) {
			this.type = e.type
			if (this.type == 1) {
				this.title = '我的待还利息'
				this.title2 = '待还利息'
				uni.setNavigationBarTitle({
					title: '我的待还利息'
				})
			} else if (this.type == 2) {
				this.title = '用户待还利息'
				this.title2 = '待还利息'
				uni.setNavigationBarTitle({
					title: '用户待还利息'
				})
			} else if (this.type == 3) {
				this.title = '用户已还利息'
				this.title2 = '已还利息'
				uni.setNavigationBarTitle({
					title: '用户已还利息'
				})
			}
			this.record()
		},
		methods: {
			detail(e) {
				uni.navigateTo({
					url: '/pages/me/recordDetails?info=' + JSON.stringify(e)+'&title='+this.title2
				})
			},
			record() {
				userInterest({
					page: this.page
				}).then(res => {
					console.log(res);
					this.total = res.data.total_money
					var info = this.list
					if (this.page == 1) {
						this.list = res.data.list
					} else {
						this.list = info.concat(res.data.list)
					}
					this.isAll = this.list.length < 10 ? false : true
				})
			}
		},
		onReachBottom() {
			console.log(this.isAll);
			if (this.isAll) {
				this.page++;
				this.info()
			}
		}
	}
</script>


<style scoped lang="scss">
	.content {
		position: relative;
		overflow: hidden;
	}
	
	.titles {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 30rpx 0;
		view{
			display: flex;
			align-items: center;
		}
		text {
			font-size: 32rpx;
			font-weight: 500;
		}
	}

	.info {
		background-color: white;
		margin: 30rpx 30rpx;
		padding: 0 30rpx 50rpx;
		border-radius: 12rpx;

		.item {
			height: 110rpx;
			border-bottom: 2rpx solid #EEEEEE;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.money {
				flex: 1;
				text-align: right;
				color: #FF5746;
				margin-right: 20rpx;
			}
		}
	}

	.none {
		width: 440rpx;
		display: block;
		margin: 240rpx auto 0;
	}
</style>